<script setup lang="ts">
import type {Museum} from "@/interfaces/museum";


interface Props {
  isShowFirst:boolean;
  museumList: Museum[];
}

const {isShowFirst, museumList} = defineProps<Props>()

const goMuseum = (museum: Museum) => {
  uni.$u.route({
    url:'/pages/museum/museum',
    params:museum
  })
}
</script>

<template>
  <view class="container">
    <view class="column">
      <view class="card text" v-if="isShowFirst">
        为你推荐
      </view>
      <template v-for="(museum,index) in museumList"
                :key="index">
        <view class="card card-list"
              v-if="(!isShowFirst && index % 2 == 0) || (isShowFirst && index % 2 == 1)"
              @tap="goMuseum(museum)"
        >
          <image :src="museum.cardImage" mode="widthFix"></image>
          <view class="museum-name">{{museum.name}}</view>
        </view>
      </template>

    </view>
    <view class="column">
      <template v-for="(museum,index) in museumList"
                :key="index">
        <view class="card card-list"
              v-if="(!isShowFirst && index % 2 == 1) || (isShowFirst && index % 2 == 0)"
              @tap="goMuseum(museum)"
        >
          <image :src="museum.cardImage" mode="widthFix"></image>
          <view class="museum-name">{{museum.name}}</view>
        </view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import "custom-museum-list.scss";
</style>